<script setup>
import { defineExpose, getCurrentInstance, onMounted, reactive, ref, toRaw, watch } from 'vue'
import ParamDefine from './ParamDefine.vue'

const props = defineProps(['leftData', 'rightData'])

const { proxy } = getCurrentInstance()
const left = ref()
const right = ref()
onMounted(async () => {})

const mappingValueFunc = (row) => {
	const leftSelect = left.value.getSelectRow()
	const rightSelect = right.value.getSelectRow()
	// console.log(leftSelect)
	// console.log(rightSelect)

	if (!leftSelect) {
		proxy.$Message.info('请选择映射数据')
		return
	}
	if (!rightSelect) {
		proxy.$Message.info('请选择映射数据')
		return
	}
	if (row._key == leftSelect._key) {
		leftSelect.mappingPath = rightSelect.path
		leftSelect.mappingJsonPath = rightSelect.jsonPath
	}
	if (row._key == rightSelect._key) {
		rightSelect.mappingPath = leftSelect.path
		rightSelect.mappingJsonPath = leftSelect.jsonPath
	}
}
const rowSelect = (row) => {
	const leftSelect = left.value.getSelectRow()
	const rightSelect = right.value.getSelectRow()

	if (row._key == leftSelect?._key) {
		//renderRight
		right.value.mappingRowHiLight(row.mappingPath)
	}
	if (row._key == rightSelect?._key) {
		//renderRight
		left.value.mappingRowHiLight(row.mappingPath)
	}
}

const repairJson = (d) => {
	return left.value.repairJson(d)
}

defineExpose({
	repairJson
})

const autoMappingFunc = (data) => {
	const leftData = props.leftData
	const rightData = props.rightData

	if (leftData == data) {
		const rootPath = '$'
		left.value.repeatCompPath(leftData.params, {}, rootPath, rootPath)
		left.value.repeatCompPath(rightData.params, {}, rootPath, rootPath)

		repeatSetMappingValue(leftData.params, rightData.params)
		return
	}
	if (rightData == data) {
		const rootPath = '$'
		left.value.repeatCompPath(rightData.params, {}, rootPath, rootPath)
		left.value.repeatCompPath(leftData.params, {}, rootPath, rootPath)

		//循环右边的再从左边的找到设置mappingValue
		repeatSetMappingValue(rightData.params, leftData.params)
		return
	}
}
const repeatSetMappingValue = (target, source) => {
	for (const t of target) {
		const p = t.path

		const bs = findValueByPath(source, p)
		if (bs != null) {
			t.mappingPath = bs.path
			t.mappingJsonPath = bs.jsonPath
		}

		if (t.children) {
			repeatSetMappingValue(t.children, source)
		}
	}
}
const findValueByPath = (source, path) => {
	let result = null

	for (const s of source) {
		if (s.path == path) {
			result = s
			break
		}
		if (s.children) {
			const b = findValueByPath(s.children, path)
			if (b) {
				result = b
				break
			}
		}
	}
	return result
}

const autoMapping = () => {}
</script>

<template>
	<el-row justify="start" style="margin-top: 10px">
		<el-col :span="12">
			<el-row justify="start" style="margin-top: 10px">
				<el-col :span="2">
					<el-tag class="ml-2" type="success">input</el-tag>
				</el-col>
			</el-row>
			<el-row justify="start" style="margin-top: 10px">
				<el-col :span="24">
					<ParamDefine
						:params="props.leftData"
						:isViewBasicFieldFlag="props.leftData?.isViewBasicFieldFlag"
						:isViewArrayFlag="props.leftData?.isViewArrayFlag"
						:isAddColumnFlag="props.leftData?.isAddColumnFlag"
						:isUpdateColumnFlag="props.leftData?.isUpdateColumnFlag"
						:isRemoveColumnFlag="props.leftData?.isRemoveColumnFlag"
						:mappingValueFunc="mappingValueFunc"
						:isActionColumnFlag="props.leftData?.isActionColumnFlag"
						:rowSelect="rowSelect"
						:isClearFlag="props.leftData?.isClearFlag"
						:jsonEditorFlag="props.leftData?.jsonEditorFlag"
						:isAddChildrenColumnFlag="props.leftData?.isAddChildrenColumnFlag"
						:isMappingColumnFlag="props.leftData?.isMappingColumnFlag"
						ref="left"
					></ParamDefine>
				</el-col>
			</el-row>
		</el-col>
		<!-- <el-col :span="2">

        <div style="position: absolute;top:50%;">
            &nbsp;<Button type="primary" @click="autoMapping">自动映射</Button>
          </div>
    </el-col> -->
		<el-col :span="12">
			<el-row justify="start" style="margin-top: 10px">
				<el-col :span="2">
					<el-tag class="ml-2" type="success">output</el-tag>
				</el-col>
			</el-row>
			<el-row justify="start" style="margin-top: 10px">
				<el-col :span="24">
					<ParamDefine
						:params="props.rightData"
						:isViewBasicFieldFlag="props.rightData?.isViewBasicFieldFlag"
						:isViewArrayFlag="props.rightData?.isViewArrayFlag"
						:isAddColumnFlag="props.rightData?.isAddColumnFlag"
						:isUpdateColumnFlag="props.rightData?.isUpdateColumnFlag"
						:isRemoveColumnFlag="props.rightData?.isRemoveColumnFlag"
						:mappingValueFunc="mappingValueFunc"
						:isActionColumnFlag="props.rightData?.isActionColumnFlag"
						:rowSelect="rowSelect"
						:isViewAutoMappingFlag="props.rightData?.isViewAutoMappingFlag"
						:jsonEditorFlag="props.rightData?.jsonEditorFlag"
						:autoMappingFunc="autoMappingFunc"
						:isClearFlag="props.rightData?.isClearFlag"
						:isViewClearMappingFlag="props.rightData?.isViewClearMappingFlag"
						:isAddChildrenColumnFlag="props.rightData?.isAddChildrenColumnFlag"
						:isMappingColumnFlag="props.rightData?.isMappingColumnFlag"
						ref="right"
					></ParamDefine>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<style scoped></style>
